<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="全国省市区三级联动" />
  <meta name="description" content="全国省市区三级联动" />
  <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fix=cover">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no,email=no,adress=no" />
  <title>新增收货地址</title>
  <style>
    .container-layout {
      margin: 100px auto;
      font-size: 16px;
    }

    h1 {
      font-size: 28px;
      text-align: center;
    }

    .select-box {
      margin: 50px auto;
      text-align: center;
    }

    .introduce {
      width: 330px;
      margin: 50px auto;
    }

    .select-box select {
      min-width: 80px;
      border: none;
      border-bottom: 1px solid #000;
      outline: none;
      text-align: center;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance:none;
    }

    .select-box select option {
      color: #333;
    }
    .not-arrow {
      padding: 5px 20px 5px 15px;
      border: 1px solid #dcd8d8;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance:none;
      /*去掉下拉箭头*/
      /*在选择框的最右侧中间显示小箭头图片（*如果select加边框箭头靠右的话，可以将小箭头图片右侧做一点空白宽度占位）*/
      background: url("static/selectAddress/arrow.png") no-repeat scroll right center transparent;
    }

    /*清除ie的默认选择框样式清除，隐藏下拉箭头 兼容到ie10*/
    .not-arrow::-ms-expand {
      display: none;
    }
  </style>
  <!--[if (gte IE 6)&(lte IE 9)]>
    <style>
      .not-arrow {
        padding: 0;
        border: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance:none;
        background: none;
      }
    </style>
  <![endif]-->
</head>

<body>
  <div class="container-layout">
    <h1>修改收获地址</h1>
    <div class="select-box">
      <select class="province not-arrow" id="province" name="province">
        <option value="">选择省份</option>
      </select>
      <select class="city not-arrow" id="city" name="city">
        <option value="">选择城市</option>
      </select>
      <select class="district not-arrow" id="district" name="district">
        <option value="">选择区域</option>
      </select>
    </div>
  
  <div style="text-align:center">
   <button>确定</button>                     
  </div>

    <div class="introduce">
    </div>
  </div>

  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="static/selectAddress/area.js"></script>
  <script type="text/javascript">
    // 注意：功能兼容ie，样式完美兼容到ie11 
    // 1.select原生下箭头样式兼容到ie10，需要在ie9及以下设置判断，区分样式
    // 2.ie有页面刷新select框缓存的问题，缓存后不能直接选取城市，js设置的placeholder也会有影响
    // 3.select框不能设置最大最小宽度
    // 4.ie不兼容input placeholder 颜色，但是我们的select是js控制的，如果跟表单一同写，会有差异

    var select = new SelectAddress('province', 'city', 'district', provinceList)
    select.init()

    var unSelected = "#999";
    var selected = "#333";
    $("select").css("color", unSelected);
    // $("option").css("color", selected);
    $("#province").change(function () {
      select.handleProvinceClick.apply(select)
      var selItem = $(this).val();
      if (selItem == $(this).find('option:first').val()) {
        $(this).css("color", unSelected);
      } else {
        $(this).css("color", selected);
      }
      $("#city").css("color", unSelected);
      $("#district").css("color", unSelected);
    });
    $("#city").change(function () {
      select.handleCityClick.apply(select)
      var selItem = $(this).val();
      if (selItem == $(this).find('option:first').val()) {
        $(this).css("color", unSelected);
      } else {
        $(this).css("color", selected);
      }
      $("#district").css("color", unSelected);
    });
    $("#district").change(function () {
      select.handleDistrictClick.apply(select)
      var selItem = $(this).val();
      if (selItem == $(this).find('option:first').val()) {
        $(this).css("color", unSelected);
      } else {
        $(this).css("color", selected);
      }
    });
  </script>
</body>

</html>